<script>
//引入Swiper, SwiperSlide组件
// import {Swiper,SwiperSlide} from "vue-awesome-swiper/src";

import {swiper, swiperSlide} from "vue-awesome-swiper/src";

export default {
  name: 'swiperCom',
  // 调用组件
  components: {
    // eslint-disable-next-line vue/no-unused-components
    swiper,
    // eslint-disable-next-line vue/no-unused-components
    swiperSlide
  },
  data() {
    return {
      img: ["https://online-course.nos-eastchina1.126.net/%E5%BD%B1%E8%A7%86%E5%90%8E%E6%9C%9F%E8%AF%BE%E7%A8%8B_pc%E8%BD%AE%E6%92%AD-1319227056260644864.png",
        "https://online-course.nos-eastchina1.126.net/4-1245893706096050176.jpg",
        "https://online-course.nos-eastchina1.126.net/lQLPJxPNXyafSVjNAZDNB4Cwse199X33-z8DtwRx8AAFAA_1920_400-1612724980137590784.png",
        "https://online-course.nos-eastchina1.126.net/%E5%BD%B1%E8%A7%86%E5%90%8E%E6%9C%9F%E8%AF%BE%E7%A8%8B_pc%E8%BD%AE%E6%92%AD-1319227056260644864.png",
        "https://online-course.nos-eastchina1.126.net/4-1245893706096050176.jpg",
      ], // 因为这是mock过来的，所以这里是空数组
      // 配置swiperOptions选项
      swiperOption: {
        loop: true,
        autoplay: true,
        //垂直方向滑动
        // direction:"vertical",
        setWrapperSize: true,
        autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        // slidesPerView: 1,
        // mousewheel: true,
        // mousewheelControl: true,
        // 高度设置，占满设备高度
        // height: 400,
        resistanceRatio: 0,
        observeParents: true,
        // 是否显示分页器
        pagination: 5,
        // 是否显示导航
        navigation: true,
        speed: 1500,
        slidesPerRow: 1,
      }
    }
  },
}
</script>

<template>
  <div class="swiper">
    <div id="video-list">
      <swiper class="swiper-wrapper" :options="swiperOption">
        <swiper-slide v-for="(i, index) in img" :key="index">
          <img class="images" :src="i"/>
        </swiper-slide>
      </swiper>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination">
      </div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev">
      </div>
      <div class="swiper-button-next">
      </div>

      <!-- 如果需要滚动条 -->
      <div class="swiper-scrollbar">
      </div>
    </div>
  </div>
</template>

<style>
.swiper {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin: -50px auto 0;
  width: 1160px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;



  #video-list {
    width: 1128px;
    height: 432px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .images {
    width: 1128px;
    height: 432px;
    border-radius: 16px;
  }

  .swiper-wrapper {
    width: 1128px;
    height: 400px;
    display: flex;
    .swiper-pagination {
      text-align: right;
    }
  }

}


</style>